<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>书卡</title>
</head>
<body>
	
	<div id="container">
		<!-- <book-card
			data-name="内在革命"
			data-image="../public/test.jpg"
			data-process="95%"
		></book-card> -->
		<book-card data-bookid="b1"></book-card>
		<book-card data-bookid="b2"></book-card>
		<book-card data-bookid="b3"></book-card>
	</div>
	<template id="bookCardTemplate">
		<style>
			.box{
				width: 300px;
				height: 500px;
				display: inline-block;
				background: #fff;
				border: 1px solid rgba(0,0,0,0.1);
				border-radius: 25px;
				box-shadow: 5px 5px 15px rgba(0,0,0,0.1),
					-5px -5px 15px rgba(0,0,0,0.1);
				margin: 10px 20px;
				position: relative;
				
				/* background: pink; */
			}
			.book-image{
				display: block;
				width: 80%;
				height: auto;
				margin: 10% auto 5%;
			}
			.book-name{
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding: 10px;
			}
			.process-bar{
				width: auto;
				height: 10px;
				margin: 0 50px 0 10px;
				background: #ccc;
				position: relative;
				border-radius: 5px;
			}
			.process-active{
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 5px;
				background: rgb(254, 189, 89);
			}
			.process-active-wrap{
				width: 100%;
				height: 100%;
				position: absolute;
				border-radius: 5px;
				overflow: hidden;
				top: 0;
			}
			.process-text{
				color: #aaa;
				position: absolute;
				right: -43px;
				left: auto;
				top: -6px;
			}
		</style>
		<div class="box">
			<img class="book-image" src="" alt="">
			<p class="book-name"></p>
			<div class="process-bar">
				<div class="process-active-wrap" id="processValue">
					<i class="process-active"></i>
				</div>
				<span class="process-text"></span>
			</div>
		</div>
	</template>
	<script src="book-card.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>